<template>
  <div class="detail-container">
      <!-- 返回按钮 -->
      <div class="header">
          <button @click="closeProfile" class="back-button">
              <i class="el-icon-arrow-left"></i> 返回
          </button>
      </div>
      
      <div class="content-wrapper">
        <div class="left-section">
            <!-- 文章头部 -->
            <div class="article-header">
                <h1 class="title">{{ tipTitel }}</h1>
                <div class="meta-info">
                    <span class="author">
                        @{{ tipUserN }}
                        <span class="user-rank" :class="getRankClass(tipUserRank)">
                            {{ getRankLabel(tipUserRank) }}
                        </span>
                    </span>
                    <span class="category">来自学院#{{ tipType }}</span>
                    <span class="time">{{ formatTime(tipTime) }}</span>
                </div>
            </div>
            
            <!-- 图片区域 -->
            <div class="image-container">
                <img 
                    :src="tipPictrue" 
                    alt="文章封面图" 
                    @click="showImageViewer = true"
                    class="article-image">
                <!-- 添加放大提示 -->
                <div class="zoom-hint">
                    <i class="el-icon-zoom-in"></i> 点击查看大图
                </div>
            </div>
            
            <!-- 文章内容 -->
            <div class="article-content" v-html="text"></div>
            
            <!-- 交互操作区 -->
            <div class="action-bar">
                <!-- 点赞按钮 -->
                <div class="like-action">
                    <button @click="toggleLike" :class="{ 'liked': isLiked }" class="like-button">
                        <span class="like-icon">
                            <i :class="isLiked ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                        </span>
                        <span class="like-count">{{ tipGoods }}</span>
                    </button>
                </div>
                
                <!-- 评论按钮 -->
                <div class="comment-action">
                    <button @click="toggleComments" class="comment-button">
                        <span class="comment-icon">
                            <i class="el-icon-chat-dot-round"></i>
                        </span>
                        <span class="comment-count">{{ tipComments }}</span>
                    </button>
                </div>
                
                <!-- 浏览数统计 -->
                <div class="view-stat">
                    <i class="el-icon-view"></i>
                    <span>{{ tipViews }}</span>
                </div>
            </div>
        </div>
        
        <!-- 评论区域 -->
        <transition name="slide">
            <div v-if="showComments" class="right-section">
                <div class="comments-header">
                    <h2>评论区 ({{ tipComments }})</h2>
                    <button @click="toggleComments" class="close-comments">
                        <i class="el-icon-close"></i>
                    </button>
                </div>

                <div class="comments-wrapper">
                    <div class="comments-scroll">
                        <div class="comments-list" ref="commentList">
                            <div v-if="comments.length === 0" class="no-comments">
                                <i class="el-icon-chat-line-square"></i>
                                <p>暂无评论，来发表第一条评论吧！</p>
                            </div>
                            
                            <div v-for="(comment, index) in comments" 
                                 :key="index" 
                                 class="comment-item" 
                                 draggable 
                                 @dragstart="dragStart($event, comment)">
                                <div class="comment-header">
                                    <div class="comment-user-info">
                                        <el-avatar :size="36" :src="String(comment.userPicture)" class="comment-avatar" @click="showUserProfile(comment.userEmail)"></el-avatar>
                                        <div class="comment-user-details">
                                            <span class="comment-author" @click="showUserProfile(comment.userEmail)">
                                                @{{ comment.userName }}
                                                <span class="user-rank" :class="getRankClass(comment.userRank)">
                                                    {{ getRankLabel(comment.userRank) }}
                                                </span>
                                            </span>
                                            <span class="comment-email">{{ comment.userEmail }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="comment-body">
                                    {{ comment.commentText }}
                                </div>
                                <div class="comment-footer">
                                    <div class="comment-meta">
                                        <span class="comment-time">{{ formatDate(comment.commentTime) }}</span>
                                        <!-- 回复数量和展开按钮 -->
                                        <div v-if="comment.comments && comment.comments > 0" class="reply-info">
                                            <button 
                                                class="expand-replies-btn"
                                                @click="toggleSecondComments(comment.commentId)"
                                                :disabled="loadingStates[comment.commentId]">
                                                <i :class="[
                                                    loadingStates[comment.commentId] ? 'el-icon-loading' : 
                                                    expandedStates[comment.commentId] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                                                ]"></i>
                                                {{ comment.comments }} 条回复
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 二级评论列表 -->
                                <transition name="fade">
                                    <div v-if="expandedStates[comment.commentId]" class="second-comments">
                                        <div v-if="loadingStates[comment.commentId]" class="loading-replies">
                                            <i class="el-icon-loading"></i> 加载回复中...
                                        </div>
                                        <template v-else>
                                            <div v-if="secondComments[comment.commentId] && secondComments[comment.commentId].length > 0" 
                                                 class="second-comments-list">
                                                <div v-for="(reply, replyIndex) in secondComments[comment.commentId]"
                                                     :key="replyIndex"
                                                     class="second-comment-item">
                                                    <div class="second-comment-header">
                                                        <div class="user-info">
                                                            <el-avatar :size="24" :src="String(reply.userPicture)" class="second-comment-avatar" @click="showUserProfile(reply.userEmail)"></el-avatar>
                                                            <span class="second-comment-author" @click="showUserProfile(reply.userEmail)">
                                                                @{{ reply.userName }}
                                                                <span class="user-rank" :class="getRankClass(reply.userRank)">
                                                                    {{ getRankLabel(reply.userRank) }}
                                                                </span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="second-comment-body">
                                                        {{ reply.commentText }}
                                                    </div>
                                                    <div class="second-comment-footer">
                                                        <span class="comment-time">{{ formatDate(reply.commentTime) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-else class="no-replies">
                                                暂无回复
                                            </div>
                                        </template>
                                    </div>
                                </transition>
                            </div>
                        </div>

                        <div class="pagination-container" v-if="totalComments > 0">
                            <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page.sync="PageNum"
                                :page-size="PageSize"
                                layout="prev, pager, next"
                                :total="totalComments">
                            </el-pagination>
                        </div>
                    </div>
                </div>

                <div class="comment-form" @drop="drop($event)" @dragover.prevent>
                    <textarea 
                        v-model="newCommentText" 
                        placeholder="添加评论..."
                        class="comment-textarea"
                        rows="3"></textarea>
                    <button @click="addComment" class="submit-comment">
                        发表评论
                    </button>
                </div>
            </div>
        </transition>
      </div>

      <!-- 图片查看器 -->
      <div v-if="showImageViewer" class="image-viewer-overlay" @click="showImageViewer = false">
        <div class="image-viewer-content" @click.stop>
            <img :src="tipPictrue" alt="大图查看" class="image-viewer-img">
            <button class="close-viewer" @click="showImageViewer = false">
                <i class="el-icon-close"></i>
            </button>
        </div>
      </div>

      <!-- 遮罩层 -->
      <div v-if="loading" class="loading-overlay">
          <loading/>
      </div>


      <!-- 用户信息弹窗 -->
      <el-dialog
        title="用户信息"
        :visible.sync="userProfileVisible"
        width="400px"
        custom-class="user-profile-dialog"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        :show-close="true"
        center>
        <div v-if="selectedUser" class="user-profile-content">
          <div class="user-profile-header">
            <el-avatar :size="80" :src="selectedUser.userPicture" class="user-avatar"></el-avatar>
            <div class="user-name">{{ selectedUser.userName }}</div>
            <div class="user-email">{{ selectedUser.userEmail }}</div>
          </div>
          <div class="user-profile-info">
            <div class="info-item">
              <span class="info-label">学院:</span>
              <span class="info-value">{{ getCategoryName(selectedUser.dept_id) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别:</span>
              <span class="info-value">{{ selectedUser.userSex }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">年龄:</span>
              <span class="info-value">{{ selectedUser.userAge }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">国籍:</span>
              <span class="info-value">{{ selectedUser.userFrom }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">积分:</span>
              <span class="info-value">{{ selectedUser.userRank }}</span>
            </div>
            <div class="info-item introduction">
              <span class="info-label">个人简介:</span>
              <span class="info-value">{{ selectedUser.userSelf }}</span>
            </div>
          </div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import {addComment, cancelUserGoods, createRank, downRank, getComment, getMyGoodTipId, gettip, userGoods, getUserInfo, getSecondComment} from "@/api/api";
import Loading from "@/components/Loading.vue";
import { getRankClass, getRankLabel } from "@/utils/rankUtils";

export default {
    components: {Loading},
    created() {
        this.tipId = this.$route.query.tipId;
        console.log(this.tipId);
        this.initTipDetail();
    },
  data() {
    return {
        newCommentText:"",
        showComments:false,
        isLiked:false,
        tipUserId:"",
        text:"",
        tipId: 0,
        tipTextid: 0,
        tipTitel: "",
        tipPictrue: "",
        tipUserN:"",
        tipStatus: 1,
        tipUserE:"",
        tipTime: "",
        tipGoods: 0,
        tipViews: 0,
        tipComments: 0,
        tipTypeId: 0,
        tipType:"",
        comments:[],
        loading:false,
        FromCommentId: null,
        showImageViewer: false,
        tipUserRank: 0,
        selectedUser: null,
        userProfileVisible: false,
        // 添加分页相关数据
        PageNum: 1,
        PageSize: 5,
        totalComments: 0,
        // 存储每个评论的二级评论
        secondComments: {},
        // 存储每个评论的展开状态
        expandedStates: {},
        // 存储每个评论的加载状态
        loadingStates: {},
    };
  },
    watch: {
    },
  methods: {
    getCategoryName(typeId) {
            const dept = this.$store.state.deptList.find(dept => dept.dept_id === typeId);
            return dept ? dept.dept_name : '不带tag';
        },
      dragStart(event, comment) {
          event.dataTransfer.setData('text/userName', comment.userName);
          event.dataTransfer.setData('text/id', comment.commentId);
          event.dataTransfer.setData('text/text', comment.commentText);
      },
      drop(event) {
          const userName = event.dataTransfer.getData('text/userName');
          const commentText = event.dataTransfer.getData('text/text');
          this.newCommentText = `@${userName}:${commentText} \n`;
          const commentId = event.dataTransfer.getData('text/id');
          this.FromCommentId = commentId;
      },
      //关闭个人信息页
      closeProfile() {
          this.$router.go(-1); // 返回上一页
      },
       async initTipDetail(){
            const response = await gettip({
                id: this.tipId,
            });
           if (response.data.message==="成功"){
               this.text=response.data.data.text;
               this.tipId = response.data.data.tipId;
               this.tipTextid = response.data.data.tipTextid;
               this.tipTitel = response.data.data.tipTitel;
               this.tipPictrue = response.data.data.tipPictrue;
               this.tipUserN = response.data.data.tipUserN;
               this.tipStatus=response.data.data.tipStatus;
               this.tipUserE = response.data.data.tipUserE;
               this.tipTime = response.data.data.tipTime;
               this.tipGoods = response.data.data.tipGoods;
               this.tipViews = response.data.data.tipViews;
                this.tipComments = response.data.data.tipComments;
                this.tipTypeId = response.data.data.tipTypeId;
               this.tipUserRank = response.data.data.tipUserRank;
               // 检查是否已点赞
               this.isLiked = this.$store.state.myGoodTips.some(tipId => tipId === this.tipId);
               // 查找对应的 dept_name
               const dept = this.$store.state.deptList.find(dept => dept.dept_id === this.tipTypeId);
                   this.tipType = dept ? dept.dept_name : '未知学院';
           }
        },
      async addComment() {
          if (!this.newCommentText.trim()) {
              this.$message({
                  message: '评论内容不能为空',
                  type: 'warning'
              });
              return;
          }

          this.loading=true;
          const params = {
              CommentText: this.newCommentText,
              TipId: this.tipId,
              FromCommentId: this.FromCommentId || null,
              UserPicture: this.$store.state.me.userPicture,
              UserRank: this.$store.state.me.userRank,
          };
          
          try {
              const newComment = await addComment(params);
              if (newComment.data.message === "成功") {
                  const commentData = {
                      ...newComment.data.data,
                      userName: this.$store.state.me.userName
                  };
                  this.newCommentText = '';
                  this.FromCommentId = null;
                  // 滚动到最新评论
                  this.$nextTick(() => {
                      if (this.$refs.commentList) {
                          this.$refs.commentList.scrollTop = this.$refs.commentList.scrollHeight;
                      }
                  });
                  // 更新评论总数
                  this.tipComments++;
                  this.totalComments++;
              } else {
                  this.$message.error(newComment.data.message || '评论失败');
              }
          } catch (error) {
              console.error('评论发送失败:', error);
              this.$message.error('评论发送失败，请稍后重试');
          } finally {
              this.loading = false;
          }
      },
    formatDate(timestamp) {
      const options = {year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'};
      return new Date(timestamp).toLocaleDateString(undefined, options);
    },
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const now = new Date();
      const diffTime = Math.abs(now - date);
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
      
      if (diffDays === 0) {
          const hours = Math.floor(diffTime / (1000 * 60 * 60));
          if (hours === 0) {
              const minutes = Math.floor(diffTime / (1000 * 60));
              return `${minutes} 分钟前`;
          }
          return `${hours} 小时前`;
      } else if (diffDays === 1) {
          return '昨天';
      } else if (diffDays < 7) {
          return `${diffDays} 天前`;
      } else {
          return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      }
    },
   async toggleLike() {
      this.isLiked = !this.isLiked;
      if (this.isLiked) {
        const response = await userGoods({
            id:this.tipId,
        });
          if (response.data.message==="成功") {
              this.tipGoods++;
              // 点赞成功，给帖子作者增加2积分
              try {
                  await createRank(this.tipUserE, 2);
                  console.log("积分增加成功");
              } catch (error) {
                  console.error("积分增加失败", error);
              }
          }
          else {
              this.$message.error("点赞失败");
              this.isLiked = !this.isLiked;
          }
      } else {
          const response = await cancelUserGoods({
              id:this.tipId,
          });
          if (response.data.message==="成功") {
              this.tipGoods--;
              // 取消点赞，给帖子作者减少2积分
              try {
                  await downRank(this.tipUserE, 2);
                  console.log("积分减少成功");
              } catch (error) {
                  console.error("积分减少失败", error);
              }
          }
          else {
              this.$message.error("取消点赞失败");
              this.isLiked = !this.isLiked;
          }
      }
       const GoodsTip= await getMyGoodTipId();
       this.$store.state.myGoodTips=GoodsTip.data.data;
       this.$store.commit('setMyGoodTips', this.$store.state.myGoodTips);
    },
   async toggleComments() {
       this.loading=true;
      this.showComments = !this.showComments;
      if (this.showComments) {
          await this.loadComments();
      }
       this.loading=false;
    },
    // 添加加载评论方法
    async loadComments() {
        const response = await getComment({
            TipId: this.tipId,
            PageNum: this.PageNum,
            PageSize: this.PageSize
        });
        if (response.data.message==="成功"){
            this.comments = response.data.data.list;
            this.totalComments = response.data.data.total;
        }
        else{
            this.$message({
                message: response.data.message,
                type: 'error',
            });
        }
    },
    // 添加页码改变处理方法
    async handleCurrentChange(val) {
        this.PageNum = val;
        await this.loadComments();
        // 滚动到评论列表顶部
        this.$nextTick(() => {
            if (this.$refs.commentList) {
                this.$refs.commentList.scrollTop = 0;
            }
        });
    },
    // 获取等级样式类
    getRankClass(rank) {
        if (!rank) return 'rank-d';
        const rankValue = parseInt(rank);
        if (rankValue <= 50) return 'rank-d';
        if (rankValue <= 100) return 'rank-c';
        if (rankValue <= 300) return 'rank-b';
        if (rankValue <= 500) return 'rank-a';
        if (rankValue <= 700) return 'rank-a-plus';
        return 'rank-s';
    },
    
    // 获取等级标签
    getRankLabel(rank) {
        if (!rank) return 'D';
        const rankValue = parseInt(rank);
        if (rankValue <= 50) return 'D';
        if (rankValue <= 100) return 'C';
        if (rankValue <= 300) return 'B';
        if (rankValue <= 500) return 'A';
        if (rankValue <= 700) return 'A+';
        return 'S·' + rankValue;
    },
    // 显示用户信息
    async showUserProfile(userEmail) {
        try {
            this.loading = true;
            const response = await getUserInfo(userEmail);
            if (response.data.message === "成功") {
                this.selectedUser = response.data.data;
                this.userProfileVisible = true;
            } else {
                this.$message.error("获取用户信息失败");
            }
        } catch (error) {
            console.error("获取用户信息失败", error);
            this.$message.error("获取用户信息失败");
        } finally {
            this.loading = false;
        }
    },
    // 切换二级评论的展开状态
    async toggleSecondComments(commentId) {
        // 如果已经展开，则收起
        if (this.expandedStates[commentId]) {
            this.$set(this.expandedStates, commentId, false);
            return;
        }
        
        // 设置加载状态
        this.$set(this.loadingStates, commentId, true);
        this.$set(this.expandedStates, commentId, true);
        
        try {
            await this.loadSecondComments(commentId);
        } finally {
            this.$set(this.loadingStates, commentId, false);
        }
    },
    
    // 加载二级评论
    async loadSecondComments(commentId) {
        try {
            const response = await getSecondComment({
                TipId: this.tipId,
                PageNum: 1,
                FromCommentId: commentId
            });
            
            if (response.data.message === "成功") {
                this.$set(this.secondComments, commentId, response.data.data.list || []);
            } else {
                this.$message.error("获取回复失败");
                this.$set(this.expandedStates, commentId, false);
            }
        } catch (error) {
            console.error("获取回复出错:", error);
            this.$message.error("获取回复出错");
            this.$set(this.expandedStates, commentId, false);
        }
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
    min-height: 100vh;
    background-color: #f6f9fc;
    display: flex;
    flex-direction: column;
}

.header {
    background: linear-gradient(90deg, #5e72e4, #825ee4);
    padding: 16px 24px;
    box-shadow: 0 4px 12px rgba(94, 114, 228, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
        background-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    i {
        font-size: 16px;
    }
}

.content-wrapper {
    display: flex;
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 32px;
    flex: 1;
}

.left-section {
    flex: 1;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 32px;
    position: relative;
}

.article-header {
    margin-bottom: 24px;
    
    .title {
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 12px;
        color: #333;
    }
    
    .meta-info {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        font-size: 14px;
        color: #666;
        
        .author {
            font-weight: 500;
            color: #5e72e4;
            cursor: pointer;
            transition: all 0.3s;
            
            &:hover {
                color: #4757c6;
                transform: translateY(-2px);
            }
        }
        
        /* 用户等级样式 */
        .user-rank {
            display: inline-block;
            font-size: 11px;
            font-weight: bold;
            padding: 1px 5px;
            border-radius: 3px;
            margin-left: 4px;
            color: white;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
            vertical-align: middle;
        }
        
        .rank-d {
            background: linear-gradient(135deg, #4caf50, #2e7d32);
        }
        
        .rank-c {
            background: linear-gradient(135deg, #2196f3, #0d47a1);
        }
        
        .rank-b {
            background: linear-gradient(135deg, #9c27b0, #4a148c);
        }
        
        .rank-a {
            background: linear-gradient(135deg, #424242, #212121);
        }
        
        .rank-a-plus {
            background: linear-gradient(135deg, #ff9800, #e65100);
        }
        
        .rank-s {
            background: linear-gradient(135deg, #ffd700, #ff6f00);
            color: #5d4037;
        }
        
        .category {
            background-color: #f0f2f7;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
        }
        
        .time {
            color: #999;
        }
    }
}

.image-container {
    width: 100%;
    max-height: none;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    cursor: pointer;
    
    &:hover .zoom-hint {
        opacity: 1;
    }
    
    .article-image {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        transition: transform 0.5s;
        object-fit: contain;
        max-height: 80vh;
        
        &:hover {
            transform: scale(1.03);
        }
    }
    
    .zoom-hint {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
        opacity: 0;
        transition: opacity 0.3s;
        
        i {
            font-size: 14px;
        }
    }
}

.article-content {
    min-height: 200px;
    background-color: #f8faff;
    padding: 24px;
    border-radius: 8px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 24px;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    border-left: 4px solid #5e72e4;
}

.action-bar {
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
    gap: 24px;
}

.like-action, .comment-action {
    display: flex;
    
    button {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.3s;
        color: #666;
    }
}

.like-button {
    &:hover {
        background-color: #ffe0eb;
        color: #ff5252;
    }
    
    &.liked {
        color: #ff5252;
        
        .like-icon {
            animation: pulse 0.3s ease-in-out;
        }
    }
}

.comment-button {
    &:hover {
        background-color: #e0e6ff;
        color: #5e72e4;
    }
}

.like-icon, .comment-icon {
    font-size: 20px;
}

.view-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    margin-left: auto;
    
    i {
        font-size: 18px;
    }
}

.right-section {
    width: 350px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.comments-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h2 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }
    
    .close-comments {
        background: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
        color: #999;
        
        &:hover {
            color: #333;
        }
    }
}

.comments-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.comments-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    
    &::-webkit-scrollbar {
        width: 6px;
    }
    
    &::-webkit-scrollbar-track {
        background: #f0f2f7;
    }
    
    &::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 20px;
    }
}

.comments-list {
    padding: 16px;
    flex: 1;
}

.no-comments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #999;
    
    i {
        font-size: 40px;
        margin-bottom: 16px;
        opacity: 0.5;
    }
    
    p {
        font-size: 14px;
    }
}

.comment-item {
    background-color: #f9fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s;
    cursor: grab;
    border: 1px solid #eef0f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
        border-color: #e6e9f0;
    }

    &:active {
        cursor: grabbing;
    }
}

.comment-header {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.comment-user-details {
    display: flex;
    flex-direction: column;
}

.comment-author {
    font-weight: 500;
    color: #5e72e4;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
        color: #4757c6;
        text-decoration: underline;
    }
}

.comment-email {
    font-size: 12px;
    color: #999;
}

.comment-body {
    margin-bottom: 16px;
    line-height: 1.6;
    color: #2c3e50;
    word-break: break-word;
    font-size: 14px;
}

.comment-footer {
    border-bottom: 1px solid #eef0f5;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8492a6;
    font-size: 13px;
}

.expand-replies-btn {
    background: none;
    border: none;
    color: #5e72e4;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover:not(:disabled) {
        background-color: #f0f2ff;
        color: #4757c6;
        transform: translateY(-1px);
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

    i {
        font-size: 14px;
        transition: all 0.3s;

        &.el-icon-loading {
            animation: rotate 1s linear infinite;
        }
    }
}

.second-comments {
    margin-top: 0;
    padding: 0 0 0 24px;
    border-left: 2px solid #e0e5ef;
    overflow: hidden;
}

.second-comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 12px;
    animation: slideDown 0.3s ease-out;
}

.second-comment-item {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s;
    border: 1px solid #eef0f5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);

    &:hover {
        background-color: #f8f9ff;
        box-shadow: 0 2px 8px rgba(94, 114, 228, 0.05);
    }
}

.second-comment-header {
    margin-bottom: 12px;

    .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

.second-comment-body {
    color: #2c3e50;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 12px;
    padding-left: 32px;
}

.second-comment-footer {
    display: flex;
    justify-content: flex-end;
    color: #8492a6;
    font-size: 12px;
    padding-left: 32px;
}

.loading-replies, .no-replies {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8492a6;
    padding: 16px;
    font-size: 13px;
    background-color: #f8fafc;
    border-radius: 8px;
    margin: 12px 0;
    border: 1px dashed #e0e5ef;
}

.loading-replies {
    i {
        font-size: 16px;
        color: #5e72e4;
        animation: rotate 1s linear infinite;
    }
}

.no-replies {
    color: #8492a6;
    font-style: italic;
    background-color: #f8fafc;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-enter-active, .fade-leave-active {
    transition: all 0.3s ease;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

.pagination-container {
    background: #fff;
    padding: 12px 0;
    display: flex;
    justify-content: center;
    border-top: 1px solid #eaeaea;
    transition: all 0.3s ease;
    margin-top: auto;

    .el-pagination {
        .btn-prev, .btn-next {
            background-color: #f8fafc;
            border: 1px solid #e4e7eb;
            border-radius: 6px;
            padding: 6px 12px;
            margin: 0 4px;
            transition: all 0.3s ease;

            &:hover {
                background-color: #5e72e4;
                color: white;
                border-color: #5e72e4;
                transform: translateY(-1px);
            }

            &:active {
                transform: translateY(0);
            }
        }

        .number {
            background-color: #f8fafc;
            border: 1px solid #e4e7eb;
            border-radius: 6px;
            padding: 6px 12px;
            margin: 0 2px;
            font-weight: 500;
            transition: all 0.3s ease;

            &:hover {
                background-color: #e8ecfd;
                color: #5e72e4;
                transform: translateY(-1px);
            }

            &.active {
                background-color: #5e72e4;
                color: white;
                border-color: #5e72e4;
            }
        }
    }
}

.dark-mode .pagination-container {
    background: #1f2937;
    border-top-color: #374151;

    .el-pagination {
        .btn-prev, .btn-next, .number {
            background-color: #1f2937;
            border-color: #374151;
            color: #e5e7eb;

            &:hover {
                background-color: #5e72e4;
                color: white;
            }
        }
    }
}

.comment-form {
    padding: 16px;
    border-top: 1px solid #eee;
}

.comment-textarea {
    width: 100%;
    border: 1px solid #e0e5ef;
    border-radius: 8px;
    padding: 12px;
    resize: none;
    margin-bottom: 12px;
    transition: all 0.3s;
    font-family: inherit;
    
    &:focus {
        outline: none;
        border-color: #456ddc;
        box-shadow: 0 0 0 2px rgba(69, 109, 220, 0.1);
    }
}

.submit-comment {
    width: 100%;
    padding: 10px;
    background-color: #5e72e4;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    
    &:hover {
        background-color: #4757c6;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(94, 114, 228, 0.3);
    }
    
    &:active {
        transform: translateY(0);
    }
}

/* 图片查看器样式 */
.image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    animation: fadeIn 0.3s ease;
}

.image-viewer-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    cursor: default;
}

.image-viewer-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.close-viewer {
    position: absolute;
    top: -40px;
    right: 0;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    
    &:hover {
        transform: rotate(90deg);
    }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 动画相关 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-enter-active, .slide-leave-active {
    transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to {
    transform: translateX(100%);
}

.user-profile-dialog {
  border-radius: 12px;
  overflow: hidden;
  
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(to right, #5e72e4, #825ee4);
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: white;
    }
  }
  
  .el-dialog__body {
    padding: 0;
  }
}

.user-profile-content {
  padding: 20px;
}

.user-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  
  .user-avatar {
    margin-bottom: 12px;
    border: 3px solid #5e72e4;
  }
  
  .user-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }
  
  .user-email {
    font-size: 14px;
    color: #666;
  }
}

.user-profile-info {
  .info-item {
    display: flex;
    margin-bottom: 12px;
    
    .info-label {
      width: 80px;
      color: #666;
      font-size: 14px;
    }
    
    .info-value {
      flex: 1;
      color: #333;
      font-size: 14px;
    }
    
    &.introduction {
      flex-direction: column;
      
      .info-value {
        margin-top: 8px;
        line-height: 1.5;
      }
    }
  }
}
</style>
